<!DOCTYPE html>
<html lang="zh-cn" >
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="author"
      content="awesome404"
    />
      
    <title>JavaScript基础 ｜ 鹊木笔记</title>
    
    
    
    <meta name="description" content="JS 语言特点 运行在客户端浏览器上 不用预编译，直接解析执行代码 弱类型语言，较为灵活 与操作系统无关，跨平台的语言 脚本语言、解释性语言 JS 三大组成部分 ECMAScript 语法 DOM (Document Object Model) 文档对象模型 BOM (Browser Object Model) 浏览器对象模型 JS 的引入方式" />
      
    <meta
      name="keywords"
      content="Blog, 程序员, 前端"
    />
      <link
    rel="shortcut icon" href="https://awesome404.gitee.io/images/favicon.ico" />

    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://awesome404.gitee.io/css/normalize.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://awesome404.gitee.io/css/zozo.css" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://awesome404.gitee.io/css/highlight.css" />

    
    
  </head>
</html>


<body>
    <div class="main animate__animated animate__fadeInDown">
        
<div class="nav_container animated fadeInDown">
  <div class="site_nav" id="site_nav">
    <ul>
      
      <li>
        <a href="/">首页</a>
      </li>
      
      <li>
        <a href="/posts/">归档</a>
      </li>
      
      <li>
        <a href="/tags/">标签</a>
      </li>
      
      <li>
        <a href="/about/">关于</a>
      </li>
      
    </ul>
  </div>
  <div class="menu_icon">
    <a id="menu_icon">
      <i class="ri-settings-line"></i>
    </a>
  </div>
</div>

        <div class="header animated fadeInDown">
  <div class="site_title_container">
    <div class="site_title">
      <h1>
        <a href="https://awesome404.gitee.io">
          <span>鹊木笔记</span>
        </a>
      </h1>
    </div>
    <div class="description">
      <p class="sub_title">
        前端菜鸡的自我修养
      </p>
      <div class="my_socials">
         
        <a href="https://github.com/404Awesome" title="github" target="_blank"
          ><i class="ri-github-fill"></i
        ></a>
         
        <a
          href="https://awesome404.gitee.io/index.xml"
          type="application/rss+xml"
          title="rss"
          target="_blank"
          ><i class="ri-rss-fill"></i
        ></a>
      </div>
    </div>
  </div>
</div>

        <div class="content">
            <div class="post_page">
                <div class="post animate__animated animate__fadeInDown">
                    <div class="post_title post_detail_title">
                        <h2><a href='/posts/javascript%E5%9F%BA%E7%A1%80/'>JavaScript基础</a></h2>
                        <span class="date">2020.03.26</span>
                    </div>
                    <div class="post_content markdown"><h1 id="js-语言特点">JS 语言特点</h1>
<ol>
<li>运行在客户端浏览器上</li>
<li>不用预编译，直接解析执行代码</li>
<li>弱类型语言，较为灵活</li>
<li>与操作系统无关，跨平台的语言</li>
<li>脚本语言、解释性语言</li>
</ol>
<h1 id="js-三大组成部分">JS 三大组成部分</h1>
<ol>
<li>ECMAScript 语法</li>
<li>DOM (Document Object Model) 文档对象模型</li>
<li>BOM (Browser Object Model) 浏览器对象模型</li>
</ol>
<h1 id="js-的引入方式">JS 的引入方式</h1>
<ol>
<li>
<p>方式一：</p>
<blockquote>
<p>引入外部 JS 文件，推荐这种，表现和内容相分离，语法格式如下</p>
<p>&lt;script  src= &ldquo;JS文件相对路径&rdquo;  type= &ldquo;text/javascript&rdquo;&gt;&lt;/script&gt;</p>
</blockquote>
</li>
<li>
<p>方式二：</p>
<blockquote>
<p>类似于CSS的内嵌式，在一对 &lt;Script&gt; 标签中书写代码</p>
<p>&lt;script  type=&ldquo;text/javascript&rdquo;&gt;  JS 语句  &lt;/script&gt;</p>
</blockquote>
</li>
</ol>
<h1 id="语法约定">语法约定</h1>
<ol>
<li>
<p>变量</p>
<blockquote>
<p>一般采用驼峰式写法，变量由多个单词组成时，除第一个单词外，其他单词首字母大写</p>
</blockquote>
</li>
<li>
<p>常量</p>
<blockquote>
<p>常量等学习到了 ES6，才会接触到，单词之间用连字符，单词全部大写</p>
</blockquote>
</li>
<li>
<p>函数</p>
<blockquote>
<p>也是驼峰式命名发，只不过前缀最好为动词，更容易体现函数的意义</p>
</blockquote>
</li>
<li>
<p>构造函数</p>
<blockquote>
<p>帕斯卡命名法 (PascalCase)，每个单词首字母都大写</p>
</blockquote>
</li>
</ol>
<h2 id="基本语法规则">基本语法规则</h2>
<ol>
<li>
<p>语句后面需要加分号</p>
<blockquote>
<p>有一些则不需要加分号，如 function 函数不需要加， for 循环和 if 判断等也不需要加</p>
</blockquote>
</li>
<li>
<p>JS 语法错误会引发后续代码终止，但不会影响其他 JS 代码块，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">	<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello World&#34;</span><span class="p">);</span>  <span class="c1">// Normal execution
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>	<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>	             <span class="c1">// Report an error
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>	<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello World&#34;</span><span class="p">);</span>  <span class="c1">// No longer execute
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">&lt;</span><span class="err">/script&gt;</span>
</span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">  	<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello JS&#34;</span><span class="p">);</span>     <span class="c1">// Normal execution
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">&lt;</span><span class="err">/script&gt;</span>
</span></span></code></pre></div></li>
<li>
<p>书写格式要规范，= + / -  运算符前后都应该有空格</p>
</li>
</ol>
<h1 id="数据类型">数据类型</h1>
<h2 id="原始值">原始值</h2>
<ol>
<li>Number (数值类型，包括整数和小数)</li>
<li>String (字符串)</li>
<li>Boolean (布尔类型，包括 true 和 false)</li>
<li>Null (空值)</li>
<li>Undefined (定义变量未赋值或未定义变量)</li>
</ol>
<blockquote>
<p>注意：变量的数据类型是由其中的值来决定的</p>
<p>Null 和 Undefined 这两个值比较特殊</p>
</blockquote>
<h2 id="引用值">引用值</h2>
<ol>
<li>Array (数组)</li>
<li>Object (对象)</li>
<li>Function (函数) 等</li>
</ol>
<h2 id="区别">区别</h2>
<ol>
<li>
<p>原始值存储在 stack 栈中</p>
<blockquote>
<p>栈储存原理是先进去的值最后出来</p>
<p>栈内存之间的变量与变量之间的传递值，是拷贝值到新变量中</p>
</blockquote>
</li>
<li>
<p>引用值存储在 heap 堆中</p>
<blockquote>
<p>但是变量名储存在栈中，变量名和值之间的关系是靠地址维护的</p>
</blockquote>
</li>
</ol>
<blockquote>
<p>堆内存用于存放引用值的值，将变量名存放在栈中，将变量名指向值存放的地址</p>
<p>传值的话, 原始值传的是值, 而引用值传的是址</p>
</blockquote>
<h1 id="定义变量">定义变量</h1>
<h2 id="如何定义">如何定义</h2>
<p>目前来说可以使用 var 来定义变量，在定义时不用指定数据类型，因为 JS 是弱类型语言，然后还可以在以后学习了 ES6 以后，使用 let 和 const 来定义变量 / 常量</p>
<p>方法一：先声明，后赋值</p>
<blockquote>
<p>var  a;</p>
<p>a  =  1;</p>
</blockquote>
<p>方法二：声明变量的同时赋值，常用这种方法定义变量</p>
<blockquote>
<p>var  a  =  1;</p>
</blockquote>
<p>方法三：一次声明多个变量，并赋值</p>
<blockquote>
<p>var  a  =  1,</p>
<p>​		b  =  2,</p>
<p>​		c  =  3;</p>
</blockquote>
<p class="alert alert-warning">注意：上面三种方法都可以，但是注意一点是不能像这样赋值，var  a  =  b  =  1;  这样做虽然为变量赋予了值，并且还可以使用，但是这样做是不规范的，学完后续的预编译就知道为什么不这样做了，而且在严格模式中是会报错的</p>
<h2 id="命名规则">命名规则</h2>
<ol>
<li>变量名必须以英文字母，_，$开头</li>
<li>变量名可以包括英文字母，_，$ 和数字</li>
<li>不可以使用系统的关键字，保留字作为变量名</li>
<li>严格区分字母大小写</li>
<li>不能以数字开头</li>
</ol>
<h1 id="运算符">运算符</h1>
<h2 id="算术运算符">算术运算符</h2>
<ol>
<li>
<p>+ 加运算</p>
<blockquote>
<p>var num = 10 + 5;</p>
<p>对两侧的值进行相加，并赋给 num</p>
</blockquote>
</li>
<li>
<p>- 减运算</p>
</li>
</ol>
<blockquote>
<p>var  num = 10 - 5;</p>
<p>对两侧的值进行相减，并赋给 num</p>
</blockquote>
<ol start="3">
<li>* 乘运算</li>
</ol>
<blockquote>
<p>var num = 5 * 2;</p>
<p>对两侧的值相乘，并赋给 num</p>
</blockquote>
<ol start="4">
<li>/ 除运算</li>
</ol>
<blockquote>
<p>var num = 5 / 2;</p>
<p>对两侧的值相除，并赋给 num</p>
</blockquote>
<ol start="5">
<li>
<p>% 模运算</p>
<blockquote>
<p>var num = 5 % 2;</p>
<p>取余，也称之为取模</p>
</blockquote>
</li>
<li>
<p>++ 自增</p>
</li>
</ol>
<blockquote>
<p>var num = 0;</p>
<p>console.log(num++);	后自增，先赋值再加一</p>
<p>console.log(++num);	前自增，先加一再赋值</p>
</blockquote>
<ol start="7">
<li>-- 自减</li>
</ol>
<blockquote>
<p>var num = 10;</p>
<p>console.log(num--);	后自减，先赋值，后减一</p>
<p>console.log(--num);	前自减，先减一，后赋值</p>
</blockquote>
<h2 id="赋值运算符">赋值运算符</h2>
<ol>
<li>
<p>= 赋值运算符</p>
<blockquote>
<p>var num = 10;</p>
<p>将右侧的值（10）赋给左侧变量（num），这个值既可以是原始值，也可以是引用值</p>
</blockquote>
</li>
<li>
<p>+= 加等于</p>
<blockquote>
<p>num  =  num  +  10;</p>
<p>num  +=  10;</p>
<p>将自身的值加上右侧的值，然后将结果赋给自身</p>
</blockquote>
</li>
<li>
<p>-= 减等于</p>
<blockquote>
<p>num  =  num  -  10;</p>
<p>num  -=  10;</p>
<p>将自身的值减去右侧的值，然后将结果赋给自身</p>
</blockquote>
</li>
<li>
<p>*= 乘等于</p>
<blockquote>
<p>num  =  num  *  10;</p>
<p>num  *=  10;</p>
<p>将自身的值乘以右侧的值，然后将结果赋给自身</p>
</blockquote>
</li>
<li>
<p>/=  除等于</p>
<blockquote>
<p>num  =  num  /  10;</p>
<p>num  /=  10;</p>
<p>将自身的值除以右侧的值，然后将结果赋给自身</p>
</blockquote>
</li>
<li>
<p>%=  模等于</p>
<blockquote>
<p>num  =  num  %  10;</p>
<p>num  %=  10;</p>
<p>将自身的值与右侧的值取模，然后将结果赋给自身</p>
</blockquote>
</li>
</ol>
<h2 id="比较运算符">比较运算符</h2>
<ol>
<li>
<p>&gt; 大于运算</p>
<blockquote>
<p>若两侧的数据类型不相等，系统会先隐式的转换数据类型，然后再比较两侧的值，若左侧的值大于右侧的值，返回 true，否则返回 false</p>
</blockquote>
</li>
<li>
<p>&lt; 小于运算</p>
<blockquote>
<p>若两侧的数据类型不相等，系统会先隐式的转换数据类型，然后再比较两侧的值，若左侧的值小于右侧，返回 true，否则返回 false</p>
</blockquote>
</li>
<li>
<p>&gt;= 大于等于</p>
<blockquote>
<p>若两侧的数据类型不相等，系统会先隐式的转换数据类型，然后再比较两侧的值，若左侧的值大于并等于右侧的值，返回 true，否则返回 false</p>
</blockquote>
</li>
<li>
<p>&lt;= 小于等于</p>
<blockquote>
<p>若两侧的数据类型不相等，系统会先隐式的转换数据类型，然后再比较两侧的值，若左侧的值若小于并等于右侧的值，返回 true，否则返回 false</p>
</blockquote>
</li>
<li>
<p>== 相等</p>
<blockquote>
<p>若两侧的数据类型不相等，系统会先隐式的转换数据类型，然后再进行比较值是否相等，若两侧值相等返回 true，否则返回 false</p>
</blockquote>
</li>
<li>
<p>!= 不相等</p>
<blockquote>
<p>若两侧的数据类型不相等，系统会先隐式的转换数据类型，然后再进行比较值是否相等，若相等，返回 false，否侧返回 true，!= 不相等是 == 相等的非运算</p>
</blockquote>
</li>
<li>
<p>=== 全等</p>
<blockquote>
<p>全等运算符则不会进行隐式的类型转换，若数据类型不同，则不会进行比较值了，直接返回 false，否则的比较值是否相等，若相等，返回 true</p>
</blockquote>
</li>
<li>
<p>!== 不全等</p>
<blockquote>
<p>不全等运算符也不会进行隐式的类型转换，若数据类型不同，则不会进行比较值了，直接返回 true，否则比较值是否相等，若相等，返回 false，!== 不全等是 === 全等非的形式</p>
</blockquote>
</li>
</ol>
<h2 id="逻辑运算符">逻辑运算符</h2>
<ol>
<li>
<p>&amp;&amp; 逻辑与</p>
<blockquote>
<p>逻辑与，两侧条件都需要成立，才返回 true，若语句中第一个条件为 false 就直接返回 false，不再往后计算，若是 true 则直接返回第二个条件的结果</p>
<p>可以作为短路语句使用，如：2 &gt; 0 &amp;&amp; console.log(&ldquo;Hello World&rdquo;);  当第一个条件为真，则直接返回第二个条件表达式</p>
</blockquote>
</li>
<li>
<p>|| 逻辑或</p>
<blockquote>
<p>逻辑或，两侧条件有一个成立，便返回 true，不再计算后面的表达式</p>
</blockquote>
</li>
<li>
<p>！逻辑非</p>
<blockquote>
<p>逻辑非，取反，是真便为假，是假便为真</p>
</blockquote>
</li>
<li>
<p>&amp; 单与</p>
<blockquote>
<p>将全部条件计算出结果才返回结果</p>
</blockquote>
</li>
<li>
<p>| 单或</p>
<blockquote>
<p>将全部条件计算出结果才返回结果</p>
</blockquote>
</li>
</ol>
<h2 id="位运算">位运算</h2>
<blockquote>
<p>待编写&hellip;</p>
</blockquote>
</div>
                    <div class="post_footer">
                        
                        
                        <div id="link">
                            <p>本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！</p>
                            <p><span id="link_href"></span><i class="ri-file-copy-2-line link_btn"></i></p>
                        </div>
                        
                        <div class="meta">
                            <div class="info">
                                <span class="field tags">
                                    <i class="ri-price-tag-2-line"></i>
                                    
                                    <a href="https://awesome404.gitee.io/tags/javascript/">JavaScript</a>
                                    
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
    <a id="back_to_top" href="#" class="back_to_top"><i class="ri-arrow-up-s-line"></i></a>
    
<style>
  #hitokoto {
    overflow: hidden;
    margin: 0 auto;
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #424242;
  }

  .footer {
    padding: 30px 0px;
  }
</style>

<footer class="footer">
  <p id="hitokoto">:D 获取中...</p>
</footer>

<script>
  fetch("https://v1.hitokoto.cn")
    .then((response) => response.json())
    .then((data) => {
      const hitokoto = document.getElementById("hitokoto");
      hitokoto.href = "https://hitokoto.cn/?uuid=" + data.uuid;
      hitokoto.innerText = data.hitokoto;
    })
    .catch((err) => err);
</script>

    <script src="https://awesome404.gitee.io/js/jquery-3.5.1.min.js"></script>
<link href="https://awesome404.gitee.io/css/fancybox.min.css" rel="stylesheet">
<script src="https://awesome404.gitee.io/js/fancybox.min.js"></script>
<script src="https://awesome404.gitee.io/js/zozo.js"></script>




</body>


<script>
    (function (){
        
        function handleIcon (remove, target){
            this.classList.remove(remove);
            this.classList.add(target);
        }

        let hrefEl = document.getElementById("link_href");
        let copyBtn = document.getElementsByClassName("link_btn")[0];
        if (hrefEl){
            hrefEl.innerText = `文章链接: ${location.href}`;
            
            copyBtn.onclick = (event) => {
                
                navigator.clipboard.writeText(`文章转载自: ${location.href}`)
                
                handleIcon.call(event.target, "ri-file-copy-2-line", "ri-check-line");
                let timer = setTimeout(() => {
                    handleIcon.call(event.target, "ri-check-line", "ri-file-copy-2-line");
                    clearTimeout(timer)
                }, 1000)
            }
        }
    })();
</script>
</html>